<template>
  <ex-dialog
    width="900px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="比赛时间" prop="time">
				<el-date-picker
          v-model="ruleForm.time"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
        </el-date-picker>
			</el-form-item>
      <el-form-item label="比赛分组" prop="groups">
				<el-input type="text" v-model="ruleForm.groups" autocomplete="off" placeholder="请填写比赛分组"></el-input>
			</el-form-item>
      <el-form-item label="队1名称" prop="oneName">
				<el-input type="text" v-model="ruleForm.oneName" autocomplete="off" placeholder="请填写队1名称"></el-input>
			</el-form-item>
      <el-form-item label="队1头像" prop="oneIcon">
          <el-upload class="avatar-uploader2" :action="action" :show-file-list="false" 
          :on-success="(response, file, fileList) => {return imgSuccess(response, file, fileList, 'oneIcon');}"
            :on-error="onError" :on-progress="(response, file, fileList,type) => {return onProgress(response, file, fileList, 'oneIcon');}" :multiple="false">
            <img class="banner_img" :src="ruleForm.oneIcon" alt="" v-if="ruleForm.oneIcon">
            <i class="el-icon-plus" style="font-size: 28px" v-else v-loading="oneIconLoading"></i>
          </el-upload>
      </el-form-item>
      <el-form-item label="队2名称" prop="twoName">
				<el-input type="text" v-model="ruleForm.twoName" autocomplete="off" placeholder="请填写队2名称"></el-input>
			</el-form-item>
      <el-form-item label="队2头像" prop="twoIcon">
          <el-upload class="avatar-uploader2" :action="action" :show-file-list="false" 
          :on-success="(response, file, fileList) => {return imgSuccess(response, file, fileList, 'twoIcon');}"
            :on-error="onError" :on-progress="(response, file, fileList) => {return onProgress(response, file, fileList, 'twoIcon');}" :multiple="false">
            <img class="banner_img" :src="ruleForm.twoIcon" alt="" v-if="ruleForm.twoIcon">
            <i class="el-icon-plus" style="font-size: 28px" v-else v-loading="twoIconLoading"></i>
          </el-upload>
      </el-form-item>
      <el-form-item label="队1赔率" prop="oneOdds">
				<el-input type="text" v-model="ruleForm.oneOdds" autocomplete="off" placeholder="请输入内容"></el-input>
			</el-form-item>
      <el-form-item label="队2赔率" prop="twoOdds">
				<el-input type="text" v-model="ruleForm.twoOdds" autocomplete="off" placeholder="请输入内容"></el-input>
			</el-form-item>
      <el-form-item label="平局赔率" prop="dogfallOdds">
				<el-input type="text" v-model="ruleForm.dogfallOdds" autocomplete="off" placeholder="请输入内容"></el-input>
			</el-form-item>
      <el-form-item label="下注截止时间" prop="deadline">
				<el-date-picker
          v-model="ruleForm.deadline"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择下注截止时间">
        </el-date-picker>
			</el-form-item>
      <el-form-item label="虚拟参与人数" prop="virtualCount">
				<el-input type="text" v-model="ruleForm.virtualCount" autocomplete="off" placeholder="请输入内容"></el-input>
			</el-form-item>
      <el-form-item label="虚拟累积奖池" prop="virtualAmount">
				<el-input type="text" v-model="ruleForm.virtualAmount" autocomplete="off" placeholder="请输入内容"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  addSupport,
  editSupport,
  supportDetail,
} from '@/api/blindBox/quizConfigOne'
import { string } from 'jszip/lib/support'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    guessActivityId: String,
    pathType: String,
    id: String,
  },
  data() {
    var validateoneOdds = (rule, value, callback) => {
      var reg = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
      if (value === '') {
        callback(new Error('请填写队1赔率'));
      } else if (value < 1) {
        callback(new Error('请填写大于1的数值'));
      } else if (!reg.test(value)) {
        callback(new Error('最多输入两位小数'));
      } else {
        callback();
      }
    };
    var validatetwoOdds = (rule, value, callback) => {
      var reg = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
      if (value === '') {
        callback(new Error('请填写队2赔率'));
      } else if (value < 1) {
        callback(new Error('请填写大于1的数值'));
      } else if (!reg.test(value)) {
        callback(new Error('最多输入两位小数'));
      } else {
        callback();
      }
    };
    var validatedogfallOdds = (rule, value, callback) => {
      var reg = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
      if (value === '') {
        callback(new Error('请填写平局赔率'));
      } else if (value < 1) {
        callback(new Error('请填写大于1的数值'));
      } else if (!reg.test(value)) {
        callback(new Error('最多输入两位小数'));
      } else {
        callback();
      }
    };
    var validatevirtualAmount = (rule, value, callback) => {
      var reg = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
      if (value === '') {
        callback(new Error('请填写虚拟累积奖池'));
      } else if (value < 0) {
        callback(new Error('请填写大于0的数值'));
      } else if (!reg.test(value)) {
        callback(new Error('最多输入两位小数'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      title: '新增比赛',
      betTypeList: [
        {id: 1,value: '神椰coco'}
      ],
      typeList: [
        {id: 1,value: '支持竞猜'},
        {id: 2,value: '冠军竞猜'},
      ],
      roleList: [],
      action: process.env.VUE_APP_BASE_API + "/common/v1/upload",
      oneIconLoading: false,
      twoIconLoading: false,
			ruleForm: {
        time: '',//比赛时间
        groups: '',//比赛分组
        oneName: '',//队1名称
        oneIcon: '',//队1头像
        twoName: '',//队2名称
        twoIcon: '',//队2头像
        oneOdds: '',//队1赔率
        twoOdds: '',//队2赔率
        dogfallOdds: '',//平局赔率
        deadline: '',//	下注截止时间
        virtualCount: '',//虚拟参与人数
        virtualAmount: '',//虚拟累积奖池
        
        guessActivityId: '',//竞猜活动id
				id: '',//支持竞猜赛事id
			},
			rules: {
          time: [
            { required: true,message: '请选择时间',trigger: 'change' }
          ],
          groups: [
            { required: true,message: '请填写比赛分组',trigger: 'blur' }
          ],
          oneName: [
            { required: true,message: '请填写队1名称',trigger: 'blur' }
          ],
          oneIcon: [
            { required: true,message: '请上传图片',trigger: 'change' }
          ],
          twoName: [
            { required: true,message: '请填写队2名称',trigger: 'blur' }
          ],
          twoIcon: [
            { required: true,message: '请上传图片',trigger: 'change' }
          ],
          oneOdds: [
            { required: true,validator: validateoneOdds,trigger: 'blur' }
          ],
          twoOdds: [
            { required: true,validator: validatetwoOdds,trigger: 'blur' }
          ],
          dogfallOdds: [
            { required: true,validator: validatedogfallOdds,trigger: 'blur' }
          ],
          deadline: [
            { required: true,message: '请选择时间',trigger: 'change' }
          ],
          virtualCount: [
            { required: true,message: '请填写虚拟参与人数',trigger: 'blur' }
          ],
          virtualAmount: [
            { required: true,validator: validatevirtualAmount,trigger: 'blur' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    if(this.pathType == 'add'){
      this.ruleForm.id = ''
    }else if(this.pathType == 'edit'){
      this.title = '编辑比赛'
      console.log('this.id',this.id)
      this.ruleForm.id = this.id
      this.getDetail()
    }
    this.ruleForm.guessActivityId = this.guessActivityId
    console.log('this.ruleForm.guessActivityId',this.guessActivityId)
	},
  methods: {
    getDetail(){
      var id = this.id
      supportDetail(id).then(res => {
        this.ruleForm = res.result
      })
    },
    imgSuccess(res, file,fileList, imgType) { //文件上传成功时
      console.log(imgType)
      if(res.code == 200){
        if(imgType == 'oneIcon'){
          this.ruleForm.oneIcon = res.result.url
          this.$refs.ruleForm.validateField('oneIcon')
          this.oneIconLoading = false
        }else if(imgType == 'twoIcon'){
          this.ruleForm.twoIcon = res.result.url
          this.$refs.ruleForm.validateField('twoIcon')
          this.twoIconLoading = false
        }
      }
      
      
    },
    onProgress(event, file, fileList,imgType) { //文件上传时
      if(imgType == 'oneIcon'){
        this.oneIconLoading = true
      }else if(imgType == 'twoIcon'){
        this.twoIconLoading = true
      }
    },
    onError(file) {
      this.imgLoading = false
    },
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) { 
          this.loading = true
          if(this.pathType == 'add'){
            var data = {
              ...this.ruleForm
            }
            addSupport(data).then(res => {
              this.handleSuccess("创建成功")
              setTimeout(() => {
                this.loading = false
              }, 1000);

            }).catch(()=>{
               this.loading = false
            }).finally(() => {})
          }else if(this.pathType == 'edit'){
            var data = {
              ...this.ruleForm
            }
            editSupport(data).then(res => {
              this.handleSuccess("修改成功")
              setTimeout(() => {
                this.loading = false
              }, 1000);
            }).catch(()=>{
               this.loading = false
            }).finally(() => {
              
            })
          }
            
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}
.el-input{
  width: 300px;
}
</style>